<template>
  <div class="article-meta">
    <nuxt-link :to="`/profile/${author.username}`">
      <img :src="author.image" />
    </nuxt-link>
    <div class="info">
      <nuxt-link :to="`/profile/${author.username}`" class="author">
        {{ author.username }}
      </nuxt-link>
      <span v-if="createdAt !== ''" class="date">{{ createdAt | date }}</span>
    </div>
    <template v-if="author.username === user.username">
      <nuxt-link
        :to="{
          name: 'editor',
          params: {
            slug,
          },
        }"
        class="btn btn-outline-secondary btn-sm"
      >
        <i class="ion-edit"></i> Edit Article
      </nuxt-link>
      &nbsp;&nbsp;
      <button class="btn btn-outline-danger btn-sm" @click="handleDelete">
        <i class="ion-trash-a"></i> Delete Article
      </button>
    </template>
    <template v-else>
      <button
        class="btn btn-sm btn-outline-secondary"
        :class="author.following ? 'active' : ''"
        :disabled="followDisabled"
        @click="handleFollowAuthor"
      >
        <i class="ion-plus-round"></i>
        &nbsp; Follow {{ author.username }}
      </button>
      &nbsp;&nbsp;
      <button
        class="btn btn-sm btn-outline-primary"
        :class="favorited ? 'active' : ''"
        :disabled="favoriteDisabled"
        @click="handleFavoritePost"
      >
        <i class="ion-heart"></i>
        &nbsp; Favorite Post <span class="counter">({{ favoritesCount }})</span>
      </button>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ArticleMeta',
  props: {
    author: {
      type: Object,
      default: () => ({
        image: '',
        username: '',
      }),
    },
    createdAt: {
      type: String,
      default: '',
    },
    slug: {
      type: String,
      default: '',
    },
    favoriteDisabled: {
      type: Boolean,
      default: false,
    },
    followDisabled: {
      type: Boolean,
      default: false,
    },
    favorited: {
      type: Boolean,
      default: false,
    },
    favoritesCount: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    handleFollowAuthor() {
      this.$emit('follow')
    },
    handleFavoritePost() {
      this.$emit('favorite')
    },
    handleDelete() {
      this.$emit('delete')
    },
  },
}
</script>

<style scoped></style>
